<template>
  <div class="payment">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #center> 确认付款 </template>
    </my-header>
    <div class="center">
      <div class="content">
        <van-icon name="gold-coin-o" style="color: red" />
        <section>
          <p>
            商品总额：<span style="color: red">￥{{ order.amount }}</span>
          </p>
          <p class="foot">订单号:{{ order.orderNumber }}</p>
        </section>
      </div>
      <div class="content">
        <van-icon name="location-o" style="color: #5a9fec" />
        <section>
          <p>{{ adress.linkMan }} {{ adress.mobile }}</p>
          <p class="foot">{{ adress.address }}</p>
        </section>
      </div>
    </div>
    <van-popup v-model:show="show" round>
      <div class="code">
        <!-- 二维码的容器 -->
        <p ref="dom" id="qrcode"></p>
      </div>
    </van-popup>
    <van-button type="danger" block @click="open"
      >微信支付 ￥{{ order.amount }}</van-button
    >
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getAddress, createOrder } from "../../api/secendPage/index";
import { useStore } from "vuex";
import myHeader from "../../components/myHeader.vue";
import QRCode from "qrcodejs2";
export default {
  components: { myHeader },
  setup() {
    const { state } = useStore();
    const dom = ref(null);
    const data = reactive({
      adress: {}, // 地址信息
      order: {}, // 订单信息
      orderList: state.cartList.filter((item) => item.order), // 订单的数据
      show: false,
    });
    let token = localStorage.getItem("token");
    getAddress({ token: token }).then((res) => {
      data.adress = res.data;
    });

    let arr = [];

    data.orderList.forEach((item) => {
      // 规格的字符串的拼接
      item.checkIds.forEach((n, index) => {
        item.checkIds[index] = `${item.bigId[index]}:${n}`;
      });
      arr.push({
        goodsId: item.id,
        logisticsType: 0,
        number: item.buyNum,
        propertyChildIds: item.checkIds.join(","),
        checked: true,
      });
    });

    createOrder({ token: token, goodsJsonStr: JSON.stringify(arr) }).then(
      (res) => {
        data.order = res.data;
      }
    );

    const open = () => {
      
      setTimeout(() => {
        // 第一个参数，二维码的容器 节点
        let dom = document.querySelector('#qrcode');
        // console.log(dom);
        // console.log(dom.value);
        new QRCode(dom, {
          text: "http://www.usian.cn",
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        });
      }, 50);
      data.show = true;
    };
    return {
      ...toRefs(data),
      open,
      dom
    };
  },
};
</script>
<style lang="scss" scoped>
.payment {
  height: 100%;
}
.center {
  height: calc(100% - 94px);
  overflow: auto;
}
.content {
  display: flex;
  border-top: 1px solid #ccc;
  padding: 10px;
  align-items: center;
  section {
    flex: 1;
    margin-left: 10px;
    font-size: 14px;
    .foot {
      margin-top: 20px;
      color: #999;
      font-size: 12px;
    }
  }
}
.code{
  background: #fff;
  padding: 10px;
}
</style>